<template>
  <div class="register">
    <Head title="帐号注册" :left="true"></Head>

    <div class="sub-child">
      <div class="logo-box">
        <img src="../../../public/img/logo.png" alt="" @click="gohome" />
      </div>

      <div class="register-box">
        <van-form @submit="onSubmit">
          <van-field
            v-model="register.mobile"
            name="mobile"
            
            left-icon="user-o"
            placeholder="请输入手机号码"
            :rules="[{ required: true, message: '请填写电话 ' },
            { pattern:phoneReg, message: '请输入正确手机号' }]"
          />
          <van-field
            v-model="register.mail"
            type="text"
            name="mail"
            left-icon="envelop-o"
            placeholder="请输入邮箱"
            :rules="[{ required: true, message: '请填写邮箱' },
            { pattern:mailReg, message: '请输入正确邮箱' }]"
          />
          <van-field
            v-model="register.password"
            :type="type_1"
            name="password"
            left-icon="warn-o"
            placeholder="请输入密码"
            :right-icon="type_1=='password'?'closed-eye':'eye-o'"
             @click-right-icon="type_1=='password'?type_1='text':type_1='password'"
            :rules="[{ required: true, message: '请填写密码' },
            { pattern:passReg, message: '请输入6-12位密码，可包含大小写字母，数字' }]"
          />
          <van-field
            v-model="register.checkPassword"
            type="password"
            name="checkPassword"
            left-icon="warn-o"
            placeholder="请再次输入密码"
            :rules="[{ required: true, message: '请再次输入密码' },
            {validator: checkpassword, message:'两次密码不一致'}]"
          />

          <van-field name="checkbox">
            <template #input>
              <van-checkbox
                checked-color="#333333"
                v-model="checkbox"
                shape="round"
                style="margin-top: 24px; font-size: 12px"
              >
                注册登录即代表同意 WRURU商城的
                <span @click.stop="show = true" style="font-weight: bold"
                  >《隐私政策》</span
                >
              </van-checkbox>
            </template>
          </van-field>

          <div style="margin: 16px; margin-top: 40px">
            <van-button
              :disabled="checkbox ? false : true"
              color="#333333"
              block
              type="info"
              native-type="submit"
             
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </div>

    <van-overlay :show="show">
      <div class="wrapper" @click.stop="show = false">
        <div class="block" style="overflow:auto">
          <div style="padding: 10px;">
            <p style="text-align: center">
              <strong
                ><span style="font-family: 微软雅黑">隐私权政策</span></strong
              >
            </p>
            <p><span style="font-family: 微软雅黑">提示条款</span></p>
            <p>
              尊敬的用户，感谢您的信任，Wruru商城是由上海凝蔻科技有限公司（以下简称“凝蔻科技”）开发并提供的一款线上购物产品。凝蔻科技深知个人信息对您的重要性，我们将按法律法规要求，采取相应安全保护措施，尽力保护您的个人信息安全可控。鉴于此，Wruru（以下“我们”）制定本《隐私权政策》（下称“本政策
              /本隐私权政策”）并提醒您：
            </p>
            <p>&nbsp;</p>
            <p>
              <span style="font-family: 微软雅黑">本政策适用于</span
              >Wruru提供的所有产品和服务。<strong
                ><span style="font-family: 微软雅黑">在使用</span
                >Wruru各项产品或服务前，请您务必仔细阅读并透彻理解本政策，特别是以粗体/粗体下划线标识的条款，您应重点阅读，在确认充分理解并同意后再开始使用。如对本政策内容有任何疑问、意见或建议，您可通过各种联系方式与我们联系。</strong
              >
            </p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>
              <span style="font-family: 微软雅黑">第一部分</span>
              <span style="font-family: 微软雅黑">定义</span>
            </p>
            <p>&nbsp;</p>
            <p>
              <span style="font-family: 微软雅黑"
                >个人信息：指以电子或者其他方式记录的能够单独或者与其他信息结合识别特定自然人身份或者反映特定自然人活动情况的各种信息。</span
              >
            </p>
            <p>&nbsp;</p>
            <p>
              <span style="font-family: 微软雅黑"
                >个人敏感信息：指包括身份证件号码、个人生物识别信息、银行账号、财产信息、行踪轨迹、交易信息。</span
              >
            </p>
            <p>&nbsp;</p>
            <p>
              <span style="font-family: 微软雅黑"
                >个人信息删除：指在实现日常业务功能所涉及的系统中去除个人信息的行为，使其保持不可被检索、访问的状态。</span
              >
            </p>
            <p>&nbsp;</p>
            <p>
              第二部分&nbsp;&nbsp;<span style="font-family: 微软雅黑"
                >隐私权政策</span
              >
            </p>
            <p>&nbsp;</p>
            <p>
              <span style="font-family: 微软雅黑">我们</span
              ><span style="font-family: 微软雅黑"
                >尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，</span
              ><span style="font-family: 微软雅黑">我们</span
              ><span style="font-family: 微软雅黑"
                >会按照本隐私权政策的规定使用和披露您的个人信息。除本隐私权政策另有规定外，在未征得您事先许可的情况下，</span
              ><span style="font-family: 微软雅黑">我们</span
              ><span style="font-family: 微软雅黑"
                >不会将这些信息对外披露或向第三方提供</span
              ><span style="font-family: 微软雅黑">，</span
              ><span style="font-family: 微软雅黑">且</span
              ><span style="font-family: 微软雅黑"
                >会不时更新本隐私权政策。</span
              >
              <span style="font-family: 微软雅黑"
                >您在同意服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于</span
              >Wruru<span style="font-family: 微软雅黑"
                >服务使用协议不可分割的一部分。</span
              >
            </p>
            <p>&nbsp;</p>
            <p>1. 适用范围</p>
            <p>
              (a) 在您注册本应用帐号时，您根据本应用要求提供的个人注册信息；
            </p>
            <p>
              (b)
              在您使用本应用网络服务，或访问本应用平台网页时，本应用自动接收并记录的您的浏览器和计算机上的信息，包括但不限于您的IP地址、浏览器的类型、使用的语言、访问日期和时间、软硬件特征信息及您需求的网页记录等数据；
            </p>
            <p>(c) 本应用通过合法途径从商业伙伴处取得的用户个人数据。</p>
            <p>&nbsp;</p>
            <p>
              <span style="font-family: 微软雅黑"
                >您了解并同意，以下信息不适用本隐私权政策：</span
              >
            </p>
            <p>(a) 您在使用本应用平台提供的搜索服务时输入的关键字信息；</p>
            <p>
              (b)
              本应用收集到的您在本应用发布的有关信息数据，包括但不限于参与活动、成交信息及评价详情；
            </p>
            <p>
              (c) 违反法律规定或违反本应用规则行为及本应用已对您采取的措施。
            </p>
            <p>&nbsp;</p>
            <p>2. 信息使用</p>
            <p>
              (a)本应用不会向任何无关第三方提供、出售、出租、分享或交易您的个人信息，除非事先得到您的许可，或该第三方和本应用（含本应用关联公司）单独或共同为您提供服务，且在该服务结束后，其将被禁止访问包括其以前能够访问的所有这些资料。
            </p>
            <p>
              (b)
              本应用亦不允许任何第三方以任何手段收集、编辑、出售或者无偿传播您的个人信息。任何本应用平台用户如从事上述活动，一经发现，本应用有权立即终止与该用户的服务协议。
            </p>
            <p>
              (c)
              为服务用户的目的，本应用可能通过使用您的个人信息，向您提供您感兴趣的信息，包括但不限于向您发出产品和服务信息，或者与本应用合作伙伴共享信息以便他们向您发送有关其产品和服务的信息（后者需要您的事先同意）。
            </p>
            <p>&nbsp;</p>
            <p>3. 信息披露</p>
            <p>
              <span style="font-family: 微软雅黑"
                >在如下情况下，本应用将依据您的个人意愿或法律的规定全部或部分的披露您的个人信息：</span
              >
            </p>
            <p>(a) 经您事先同意，向第三方披露；</p>
            <p>
              (b)为提供您所要求的产品和服务，而必须和第三方分享您的个人信息；
            </p>
            <p>
              (c)
              根据法律的有关规定，或者行政或司法机构的要求，向第三方或者行政、司法机构披露；
            </p>
            <p>
              (d)
              如您出现违反中国有关法律、法规或者本应用服务协议或相关规则的情况，需要向第三方披露；
            </p>
            <p>
              (e)
              如您是适格的知识产权投诉人并已提起投诉，应被投诉人要求，向被投诉人披露，以便双方处理可能的权利纠纷；
            </p>
            <p>
              (f)
              在本应用平台上创建的某一交易中，如交易任何一方履行或部分履行了交易义务并提出信息披露请求的，本应用有权决定向该用户提供其交易对方的联络方式等必要信息，以促成交易的完成或纠纷的解决。
            </p>
            <p>(g) 其它本应用根据法律、法规或者网站政策认为合适的披露。</p>
            <p>&nbsp;</p>
            <p>4. 信息存储和交换</p>
            <p>
              <span style="font-family: 微软雅黑"
                >本应用收集的有关您的信息和资料将保存在本应用及（或）其关联公司的服务器上，这些信息和资料可能传送至您所在国家、地区或本应用收集信息和资料所在地的境外并在境外被访问、存储和展示。</span
              >
            </p>
            <p>&nbsp;</p>
            <p>5. Cookie的使用</p>
            <p>
              (a)
              在您未拒绝接受cookies的情况下，本应用会在您的计算机上设定或取用cookies
              ，以便您能登录或使用依赖于cookies的本应用平台服务或功能。本应用使用cookies可为您提供更加周到的个性化服务，包括推广服务。
            </p>
            <p>
              (b)
              您有权选择接受或拒绝接受cookies。您可以通过修改浏览器设置的方式拒绝接受cookies。但如果您选择拒绝接受cookies，则您可能无法登录或使用依赖于cookies的本应用网络服务或功能。
            </p>
            <p>(c) 通过本应用所设cookies所取得的有关信息，将适用本政策。</p>
            <p>&nbsp;</p>
            <p>6. 信息安全</p>
            <p>
              (a)
              本应用帐号均有安全保护功能，请妥善保管您的用户名及密码信息。本应用将通过对用户密码进行加密等安全措施确保您的信息不丢失，不被滥用和变造。尽管有前述安全措施，但同时也请您注意在信息网络上不存在“完善的安全措施”。
            </p>
            <p>
              (b)
              在使用本应用网络服务进行网上交易时，您不可避免的要向交易对方或潜在的交易对方披露自己的个人信息，如联络方式或者邮政地址。请您妥善保护自己的个人信息，仅在必要的情形下向他人提供。如您发现自己的个人信息泄密，尤其是本应用用户名及密码发生泄露，请您立即联络本应用客服，以便本应用采取相应措施。
            </p>
            <p>&nbsp;</p>
            <p>7.本隐私政策的更改</p>
            <p>
              (a)如果决定更改隐私政策，我们会在本政策中、本公司网站中以及我们认为适当的位置发布这些更改，以便您了解我们如何收集、使用您的个人信息，哪些人可以访问这些信息，以及在什么情况下我们会透露这些信息。
            </p>
            <p>
              (b)本公司保留随时修改本政策的权利，因此请经常查看。如对本政策作出重大更改，本公司会通过网站通知的形式告知。
            </p>
            <p>&nbsp;</p>
            <p>8.<span style="font-family: 微软雅黑">如何联系我们</span></p>
            <p>
              <span style="font-family: 微软雅黑"
                >您可以通过以下方式与我们联系，我们将在</span
              >15天内回复您的请求：
            </p>
            <p>
              (a)<span style="font-family: 微软雅黑"
                >如对本政策内容、个人信息有任何疑问、意见或建议，您可通过客服与我们联系；</span
              >
            </p>
            <p>
              (b)<span style="font-family: 微软雅黑"
                >如发现个人信息可能被泄露，您可以投诉举报；</span
              >
            </p>
            <p>&nbsp;</p>
            <p>
              9.更新说明
              <br />凝蔻科技保留随时更新本声明的权利，当声明发生修改时，我们会通过弹窗或通知的方式告知您变更后的声明。如您继续使用我们的服务，
              即视为您同意我们的变更后的隙私政策我们才会按照更新的声明收集、使用、存储您的个人信息。
            </p>
            <p>&nbsp;</p>
            <p>本声明自更新之日起生效<br />最近的更新日期：2020年11月20日</p>
          </div>
        </div>
      </div>
    </van-overlay>


  </div>
</template>


<script>
import{phoneReg,passReg,mailReg} from "@/utils/tool"
import { Notify } from 'vant';
export default {
  data() {
    return {
      register: {},
      checkbox: false,
      show: false,
      phoneReg,
      passReg,
      mailReg,
      type_1:"password",

    };
  },
  methods: {
      gohome(){
      this.$router.push({name:'home'})
    },
    onSubmit(values) {
      console.log("submit", values);
      this.$ajax.userRegister(values)
      .then(res=>{
          // console.log(res)
          if(res.code==200){
            Notify({ type: 'success', message: res.msg });
            this.$router.push({name:'login',query:{mobile:values.mobile}})
          }else{
            Notify({ type: 'warning', message: res.msg });
          }
      }).catch(err=>{
            Notify({ type: 'danger', message: err.msg});
      })
    },
    checkpassword(val){
      return this.register.password == val
    },
    

  },
};
</script>



<style lang="scss" scoped>
::v-deep .head {
  .van-nav-bar__title,
  .van-ellipsis {
    color: #323233;
    font-size: 14px !important;
  }
}
.register {
  height: 100%;
  background-color: #fff;
  .logo-box {
    display: flex;
    justify-content: center;
    margin-top: 32px;
    img {
      width: 120px;
    }
  }
  .register-box {
    padding: 0 48px;
  }
  .van-cell,
  .van-field {
    margin-top: 12px;
  }
  .van-checkbox__label {
    font-size: 12px;
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 80%;
  height: 80%;
  background-color: #fff;
  border-radius: 13px;
}
::v-deep .van-icon-user-o{
  font-size: 25px !important;
}
::v-deep  .van-icon-warn-o{
  font-size: 25px !important;
}
::v-deep .van-icon-envelop-o{
  font-size: 25px !important;
}

::v-deep .van-icon-closed-eye{
  font-size: 25px !important;
}

::v-deep .van-icon-eye-o{
  font-size: 25px !important;
}

</style>